<!-- 加载templates模板 -->
{% extends 'layout/layui_base_page.html' %}

<!-- 加载静态文件 --->
{% load static %}

<!-- Title -->
{% block title %}培训管理系统主界面{% endblock %}


<!-- CSS -->
{% block css %}{% endblock %}


<!-- Content -->
{% block content %}
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">培训管理系统后台</div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-left" id="topMenu">

                <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>

            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                    <a href="javascript:;">
                        <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                             class="layui-nav-img">
                        <span id="currentUser">{{ request.session.user.name }}</span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a id="a_ChUserInfo" href="javascript:;">个人信息</a></dd>
                        <dd><a id="a_chUserPwd" href="javascript:;">修改密码</a></dd>
                        <dd><a href="{% url 'main_logout' %}">注销</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                </li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <!--
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;">培训管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="{% url 'trainee_info' %}" target="rightArea">培训信息</a></dd>

                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">基础数据</a>
                        <dl class="layui-nav-child">
                            <dd><a href="{% url 'employee' %}" target="rightArea">员工信息</a></dd>
                            <dd><a href="{% url 'base_data' %}" target="rightArea">培训基础信息</a></dd>

                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">用户角色</a>
                        <dl class="layui-nav-child">
                            <dd><a href="{% url 'account' %}" target="rightArea">登陆账号</a></dd>
                            <dd><a href="{% url 'roles' %}" target="rightArea">角色信息</a></dd>
                            <dd><a href="{% url 'menu' %}" target="rightArea">菜单管理</a></dd>
                            <dd><a href="{% url 'permission' %}" target="rightArea">权限明细</a></dd>
                        </dl>
                    </li>
                    -->
                    {% for item in request.session.menu_dict.values %}
                        <li class="layui-nav-item">
                            <a href="javascript:;"><i class="{{ item.icon }}" aria-hidden="true">  {{ item.title }}</i>
                            </a>
                            <dl class="layui-nav-child">
                                {% for node in item.children %}
                                    <dd>
                                        <a href="{{ node.url }}" target="rightArea">{{ node.title }}</a>
                                    </dd>
                                {% endfor %}
                            </dl>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <iframe id="rightArea" name="rightArea" frameborder="0" width="100%" height="820px">

                </iframe>
            </div>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            底部固定区域
        </div>
    </div>

    <!-- 个人信息的弹出层 -->
    <div class="layerUserInfoArea" style="display: none; padding: 20px">
        <form id="layerForm" class="layui-form" lay-filter="layerForm">
            {% csrf_token %}
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="loginid"><b>账号：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" id="loginid" name="loginid" readonly class="layui-input"
                               style="background-color: #eaeaea">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="name"><b>姓名：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" id="name" name="name" class="layui-input">
                        <span class="error_msg" style="color:red; font-weight: bold; position: absolute"></span>
                    </div>
                </div>
            </div>


            <div class="layui-form-item">

                <div class="layui-inline" style="width: 626px;">
                    <label class="layui-form-label" for="roles"><b>所属角色：</b></label>
                    <div class="layui-input-block">
                        <input type="text" id="roles" name="roles" class="layui-input" readonly
                               style="background-color: #eaeaea">
                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="department"><b>部门：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" id="department" name="department" class="layui-input">
                        <span class="error_msg" style="color:red; font-weight: bold; position: absolute"></span>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="position"><b>职位：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" id="position" name="position" class="layui-input">
                        <span class="error_msg" style="color:red; font-weight: bold; position: absolute"></span>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="mobile"><b>电话：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" id="mobile" name="mobile" class="layui-input">
                        <span class="error_msg" style="color:red; font-weight: bold; position: absolute"></span>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="email"><b>邮箱地址：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" id="email" name="email" class="layui-input">
                        <span class="error_msg" style="color:red; font-weight: bold; position: absolute"></span>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="create_time"><b>创建时间：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" id="create_time" name="create_time" class="layui-input" readonly
                               style="background-color: #eaeaea">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="edit_time"><b>修改时间：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" id="edit_time" name="edit_time" class="layui-input" readonly
                               style="background-color: #eaeaea">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label" for="last_login"><b>上次登陆：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" id="last_login" name="last_login" class="layui-input" readonly
                               style="background-color: #eaeaea">
                    </div>
                </div>
            </div>

        </form>
    </div>

    <!-- 修改密码的弹出层 -->
    <div class="layerChangePwdArea" style="display: none; padding: 20px">
        <form class="layui-form" id="changePwdForm" lay-filter="changePwdForm">
            {% csrf_token %}
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="loginid"><b>账号：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" id="ch_loginid" name="ch_loginid" readonly class="layui-input"
                               style="background-color: #eaeaea">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="name"><b>姓名：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" id="ch_name" name="ch_name" readonly class="layui-input"
                               style="background-color: #eaeaea">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="oldpwd"><b>原密码：</b></label>
                    <div class="layui-input-inline">
                        <input type="password" id="oldpwd" name="oldpwd" class="layui-input">
                        <span class="error_msg" style="color:red; position: absolute;font-weight: bold"></span>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="loginpwd"><b>新密码：</b></label>
                    <div class="layui-input-inline">
                        <input type="password" id="loginpwd" name="loginpwd" class="layui-input">
                        <span class="error_msg" style="color:red; position: absolute;font-weight: bold"></span>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="reloginpwd"><b>确认密码：</b></label>
                    <div class="layui-input-inline">
                        <input type="password" id="reloginpwd" name="reloginpwd" class="layui-input">
                        <span class="error_msg" style="color:red; position: absolute;font-weight: bold"></span>
                    </div>
                </div>
            </div>
        </form>
    </div>
{% endblock %}


<!-- JS-->
{% block js %}
    <script>
        // 获取Session中的用户
        var CURRENT_USER = {{ request.session.user |safe}};
        // 入口函数
        $(function () {
            // 页面初始化调用
            initPage();
            // 点击事件
            buttonClick();


        });


        // ================= Layui页面的初始化 =====================
        function initPage() {
            layui.use(['element', 'layer', 'util'], function () {
                var element = layui.element
                    , layer = layui.layer
                    , util = layui.util
                    , $ = layui.$;

                //头部事件
                util.event('lay-header-event', {
                    //左侧菜单事件
                    menuLeft: function (othis) {
                        layer.msg('展开左侧菜单的操作', {icon: 0});
                    }
                    , menuRight: function () {
                        layer.open({
                            type: 1
                            , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                            , area: ['260px', '100%']
                            , offset: 'rt' //右上角
                            , anim: 5
                            , shadeClose: true
                        });
                    }
                });

                // 初始化产线
                initLines();

            });
        }

        // =============== 初始化所有的产线信息 ===================
        function initLines() {
            // == Ajax请求===
            $.ajax({
                url: "{% url 'get_line_data' %}",
                method: 'get',
                async: false,
                success: function (res) {
                    // === 获取父容器 ====
                    let parentContainer = $('#topMenu');
                    // === 清空 ===
                    parentContainer.empty();
                    // 循环添加
                    $.each(res.data, (index, value) => {
                        let liContainer = "";
                        if (value.id === parseInt({{ request.session.current_line }})) {
                            liContainer = $('<li>').attr({
                                'class': 'layui-nav-item layui-hide-xs layui-this lineItem',
                                'id': value.id
                            });
                        } else {
                            liContainer = $('<li>').attr({
                                'class': 'layui-nav-item layui-hide-xs lineItem',
                                'id': value.id
                            });
                        }
                        // 新建A标签
                        $('<a>').attr({
                            'href': 'javascript:;'
                        }).html(value.name).appendTo(liContainer);
                        // 附加到父容器
                        liContainer.appendTo(parentContainer);
                    })
                }
            });


        }

        // ============== 按钮点击事件 ==================
        function buttonClick() {

            // 产线的切换
            $('body').on('click', '.lineItem', function () {
                // 获取当前的id
                let id = $(this).attr('id');
                // 切换产线
                $.ajax({
                    url: "{% url 'change_line' %}",
                    method: 'post',
                    data: {
                        line_id: id,
                    },
                    success: function (res) {
                        if (res.status) {
                            layui.layer.msg("产线切换成功！");
                            location.reload();
                        }
                    }
                })
            });

            // 点击查看详情
            $('#a_ChUserInfo').on('click', function () {
                loadUserInfoLayer();
            });
            // 修改密码
            $('#a_chUserPwd').on('click', function () {
                loadChPwdLayer();
            })

        }

        // ============== 个人信息的弹出层 ===================
        function loadUserInfoLayer() {
            layui.use(['layer', 'form'], function () {
                let layer = layui.layer;
                let form = layui.form;

                layer.open({
                    type: 1
                    , title: "<b style='color:navy'>" + "【查看和更改个人信息】" + "</b>"
                    , btn: ['确定', '取消']
                    , area: ['700px', '500px']
                    , content: $('.layerUserInfoArea')
                    , resize: false

                    // ============== 三个构造函数 ============
                    , success: function (index, layero) {
                        // 填充当前用户信息
                        form.val('layerForm', CURRENT_USER);
                    }
                    , yes: function (index, layero) {
                        // 提交
                        $.ajax({
                            url: "{% url 'main_change_info' %}"
                            , method: 'post'
                            , data: $('#layerForm').serialize()
                            , success: function (res) {
                                if (res.status) {
                                    // 重新加载
                                    location.reload();
                                } else {
                                    layui.layer.msg(res.error, {
                                        icon: 2, area: ['400px', '200px'], time: -1, btn: ['取消']
                                    })
                                }
                            }
                        })
                    }
                })
            })
        }

        // ============== 修改密码的弹出层 ===================
        function loadChPwdLayer() {
            layui.use(['layer', 'form'], function () {
                let layer = layui.layer;
                let form = layui.form;

                layer.open({
                    type: 1
                    , title: "<b style='color:navy'>" + "【更改密码】" + "</b>"
                    , btn: ['确定', '取消']
                    , area: ['400px', '460px']
                    , content: $('.layerChangePwdArea')
                    , resize: false

                    // ============== 三个构造函数 ============
                    , success: function (index, layero) {
                        // 填充当前用户信息
                        $('#ch_loginid').val(CURRENT_USER.loginid);
                        $('#ch_name').val(CURRENT_USER.name);
                    }
                    , yes: function (index, layero) {

                        // ==== 输入判断 ====
                        $('.error_msg').empty();
                        // 旧密码是否输入
                        if ($('#oldpwd').val().length < 6) {
                            $('#oldpwd').next().html("旧密码不能小于6位！");
                            return;
                        }
                        // 新密码
                        if ($('#loginpwd').val().length < 6) {
                            $('#loginpwd').next().html("新密码不能小于6位！");
                            return;
                        }

                        // 确认新密码
                        if ($('#reloginpwd').val() != $('#loginpwd').val()) {
                            $('#reloginpwd').next().html("两次密码不一致！");
                            return;
                        }
                        // 提交
                        $.ajax({
                            url: "{% url 'main_change_pwd' %}"
                            , method: 'post'
                            , data: $('#changePwdForm').serialize()
                            , success: function (res) {
                                if (res.status) {
                                    // 重新加载
                                    layer.msg("密码修改成功！");
                                    layer.close(index);
                                    //跳转
                                    location.href = "{% url 'login' %}";
                                } else {
                                    layui.layer.msg(res.error, {
                                        icon: 2, area: ['400px', '200px'], time: -1, btn: ['取消']
                                    })
                                }
                            }
                        })
                    }
                })
            })
        }
    </script>


{% endblock %}